<!-- saved from url=(0048)http://localhost:8080/example/js/play-from-disk/ -->
<html>
<script>
	const pc = new RTCPeerConnection({
		iceServers: [{
			urls: 'stun:stun.l.google.com:19302'
		}]
	})
	const log = msg => {
		document.getElementById('log').innerHTML += msg + '<br>'
	}

	pc.oniceconnectionstatechange = e => log(pc.iceConnectionState)
	pc.onicecandidate = event => {
		console.log(event.candidate)
		log(JSON.stringify(event.candidate))
		if (event.candidate === null) {
			document.getElementById('localSessionDescription').value = btoa(JSON.stringify(pc.localDescription))
		}
	}

	// Offer to receive 1 audio, and 1 video track
	// pc.addTransceiver('video', {
	// 	direction: 'sendrecv'
	// })
	// pc.addTransceiver('audio', {
	// 	direction: 'sendrecv'
	// })

	
	navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then(stream => {
		document.getElementById('localVideo').srcObject = stream
	  stream.getTracks().forEach(track => pc.addTrack(track, stream))
	  pc.createOffer().then(d => pc.setLocalDescription(d)).catch(log)
	})

</script>
<body>
	<h3> Local Video </h3>
  <video id="localVideo" width="160" height="120" autoplay muted></video> <br />

	<br>
	Local Session Description
	<br>
	<textarea id="localSessionDescription" readonly="true"></textarea>
	<br>
	Remote Session Description
	<br>
	<textarea id="remoteSessionDescription"></textarea>

	
	<br>
	<div id="log"></div> <br>

</body>

</html>